/* header start */
.header {
            /* height: 50px; */
            /* background-color: khaki; */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 750px;
            margin: 22px auto 0
        }
        .header .logo-wrap {
            /* border: 1px solid red; */
            flex:1;
            margin-left: 34px;
        }
        .header .search {
            /* border: 1px solid red; */
            margin-right: 50px;
        }
        .header .login {
            /* border: 1px solid red; */
            margin-right: 41px;
            width: 48px;
            height: 48px;
            background-color: #DBDBDB;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            /* color: #FFFFFF; */
        }
        .header .login a {
            color: #FFFFFF;
        }
        .header .download {
            /* border: 1px solid red; */
            background-color: #FF9F00;
            width: 144px;
            height: 48px;
            font-size: 25px;
            color: #FFFFFF;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 19px;
        }
        .header .logo-wrap .logo {
            width: 144px;
        }
        .header .search .search-img {
            width: 36px;
        }
        /* end header  */

        /* nav start */
        .nav{
            /* height: 100px; */
            /* background-color: khaki; */
            border-bottom: 1px solid #F3F3F3;
            margin: 45px auto 0;
            padding-left: 30px;
            width: 750px;
        }


        .nav .swiper-slide a {
            color: #6B6B6B;
            font-size: 28px;
            font-weight: 400;
            padding-bottom: 21px;
            display: inline-block;
            border-bottom: 2px solid transparent;
        }
        .nav .swiper-slide a.active{
            color: #000;
            border-bottom: 2px solid #FF9F00;
        }
        /* end nav */

        /* banner start */
        .banner{
            width: 712px;
            height: 236px;
            background-color: #F3F3F3;
            margin: 19px auto 18px;
        }
        .banner .swiper {
            --swiper-pagination-bullet-horizontal-gap: 6px;
        }
        .banner .swiper-slide {
            height: 236px;
        }
        .banner .swiper-pagination-bullet {
            width: 15px;
            height: 6px;
            background-color: #FFFFFF;
            /* opacity: 0.2; */
            border-radius: 0;
        }
        /* banner end */

                /* menu start */
        .menu {
            width: 712px;
            /* min-height: 314px; */
            background-color: #F7F7F7;
            margin: 0 auto;
            padding-top: 30px;
            padding-bottom: 30px;
            border-radius: 8px;
            margin-bottom: 18px;
        }
        .menu ul {
            display: flex;
            flex-wrap: wrap;
            row-gap: 36px;
        }
        .menu ul li{
            width: 20%;
            /* min-height: 100px; */
            /* border: 1px solid #000; */
        }
        .menu ul li a {
            display: flex;
            flex-direction: column;
            row-gap: 20px;
            align-items: center;
            justify-content: center;
        }
        .menu ul li img {
            width: 76px;
            height: 76px;
        }
        .menu ul li p {
            font-size: 22px;
            color: #6B6B6B;
        }
        /* menu end */

        /* tabs start */
        .main {
            /* background-color: #fff; */
            min-height: 800px;
        }
        .tabs {
            background-color: #F7F7F7;
            border-radius: 8px;
        }
        .tabs .tabs-header {
            height: 104px;
            /* background-color: pink; */
            display: flex;
            align-items: center;
            padding-left: 12px;
            column-gap: 28px;
        }
        .tabs .tabs-header-item {
            border: 1px solid #6B6B6B;
            width: 118px;
            height: 44px;
            text-align: center;
            line-height: 44px;
            font-size: 22px;
            color: #6c6c6c;
            border-radius: 22px;
            padding-left: 3px;
            padding-right: 3px;
        }
        .tabs .tabs-header-item.active {
            border-color: #FF9F00;
            color: #FF9F00;
            font-weight: 400;

        }

        .tabs .tabs-content .tabs-content-item {
            /* min-height: 200px; */
            /* border: 1px solid #000; */
            display: none;
        }
        .tabs .tabs-content-item .swiper {
            height: 300px;
        }
        .common-card {
            /* border: 1px solid red; */
            border-radius: 8px;
        }
        .common-card .img {
            height: 194px;
            /* background-color: skyblue; */
            position: relative;
        }
        .common-card .img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .common-card .img .card-info {
            width: 100%;
            height: 56px;
            /* border: 1px solid skyblue; */
            background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            color: #fff;
            display: flex;
            justify-content: space-between;
            padding:15px 0 14px 0;
            padding-left: 12px;
            padding-right: 12px;

        }
        .common-card .img .card-info span {
            /* border:1px solid #fff; */
            padding-left: 40px;
            font-size: 24px;
            line-height: 22px;
            /* font-weight: 400; */
        }
        .common-card .img .card-info .play-count {
            background-image: url(../images/icon-paly.png);
            background-repeat: no-repeat;
            background-size: 30px 26px;
        }
        .common-card .img .card-info .number {
            background-image: url(../images/icon-number.png);
            background-repeat: no-repeat;
        }
        .common-card .title {
            box-sizing: content-box;
            font-size: 24px;
            color: #000;
            line-height: 36px;
            height: 72px;
            padding-top: 8px;
            margin-bottom: 10px;
            padding-left: 12px;
            padding-right: 12px;
            /* border: 1px solid #E5E5E5; */

        }
        /* tabs end */

        /* recommend-list start */
        .recommend-list {
            /* min-height: 300px; */
            background-color: #F7F7F7;
            margin-top: 18px;
            border-radius: 8px;
        }
        .recommend-list ul li {
            /* border: 1px solid skyblue; */
            padding: 20px 0 20px 0;
            margin: 0 20px;
            border-bottom: 1px solid #E6E6E6;
        }
        .recommend-list ul li a {
            display: flex;
            align-items: center;
        }
        .recommend-list ul li:last-child {
            border-bottom: none;
        }
        .recommend-list ul li .img {
            width: 76px;
            height: 76px;
            background-color: pink;
            flex-shrink: 0;
        }
        .recommend-list ul li .info {
            flex: 1;
            min-width: 0;
            /* max-width: 500px; */
            /* background-color: skyblue; */
            min-height: 76px;
            margin-left: 18px;
            margin-right: 23px;
        }
        .recommend-list ul li .play-button {
            width: 44px;
            height: 44px;
            /* background-color: pink; */
            background-image: url(../images/icon-play2.png);
            background-size: cover;
            flex-shrink: 0;
        }
        .recommend-list ul li .info .title {
            font-size: 26px;
            color: #FF9F00;
            font-weight: 400;
            line-height: 1;
            /* border: 1px solid red; */
        }
        .recommend-list ul li .info .desc {
            font-size: 22px;
            color: #333333;
            font-weight: 400;
            line-height: 1;
            /* border: 1px solid red; */
            margin-top: 23px;
        }
        /* end recommend-list */

        /* history start */
        .history {
            /* min-height: 300px; */
            background-color: #F7F7F7;
            margin-top: 18px;
            border-radius: 8px;
        }

        .history .history-header {
            height: 82px;
            /* background-color: skyblue; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }

        .history .history-header .title {
            font-size: 34px;
            color: #000000;
            font-weight: bold;
        }

        .history .history-header a {
            font-size: 26px;
            color: #B9B9BD;
            font-weight: 400;
            padding-right: 24px;
            background-image: url(./images/arrow-right.png);
            background-repeat: no-repeat;
            background-position: right center;
            /* border: 1px solid skyblue; */
            background-size: 11px
        }
        .history .swiper-slide {
            width: 170px;
            /* border: 1px solid #B9B9BD; */
        }

        .history .swiper-slide .img-warp {
            width: 170px;
            height: 228px;
            /* background-color: skyblue; */
        }

        .history .swiper-slide .img-warp img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .history .swiper-slide .title {
            font-size: 24px;
            color: #000000;
            font-weight: 400;
            /* padding: 12px 0 0 12px; */
            line-height: 36px;
            height: 72px;
            margin-top: 10px;
            margin-bottom: 11px;
        }
        /* history end */

        /* information list start */
                .information-list {
            /* min-height: 700px; */
            /* background-color: #F7F7F7; */
            margin-top: 18px;
            margin-bottom: 110px;
        }
        .information-list ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            column-gap: 19px;
        }
        .information-list ul li {
            width: 346px;
            min-height: 300px;
            /* border: 1px solid #E5E5E5; */
        }
        .information-list .common-card p.title {
            /* margin-bottom: 12px; */
        }
        /* end information list */
        
        /* tabber start */
        .tabber {
            width: 750px;
            height: 100px;
            background-color: #fff;
            box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 999;

        }
        .tabber ul {
            display: flex;
            justify-content: space-between;
            /* align-items: center; */
            padding: 13px 39px 0;
        }
        .tabber ul li {
            /* border: 1px solid #000; */
        }
        .tabber ul li a {
            display: flex;
            flex-direction: column;
            /* align-items: center; */
        }
        .tabber ul li a span {
            font-size: 24px;
            color: #000;
            font-weight: 400;
            line-height: 1;
            /* border: 1px solid #000; */
            /* padding-top: 10px ; */

        }
        .tabber .icon {
            height: 40px;
            background-repeat: no-repeat;
            background-position: top center;
            background-size: auto 37px;
            margin-bottom: 8px;
            /* border: 1px solid #000; */
        }
        .tabber ul li.active a span {
            color: #FF9F00;
        }
        .tabber .icon1 {
            background-image: url(../images/tabber1.png);

        }
        .tabber .icon2 {
            background-image: url(../images/tabber2.png);
        }
            
        .tabber .icon3 {
            background-image: url(../images/tabber3.png);
        }
        .tabber .icon4 {
            background-image: url(../images/tabber4.png);
        }
        .tabber ul li.add a {
            display: block;
            width: 79px;
            height: 78px;
            background-color: #FF9F00;
            border-radius: 29px;
            background-image: url(../images/add.png);
            background-position: center center;
            background-size: 35px 35px;
            background-repeat: no-repeat;
        }
        /* end tabber */
